Estoy tratando de usar un enlace de navegación en mi archivo app.jsx para crear enlaces en mi barra de navegación, pero cuando intento iniciar npm, no veo los enlaces de navegación y recibo un mensaje que dice No hay rutas que coincidan con la ubicación "/". No estoy seguro de por qué. Vi en alguna parte que necesitaba comenzar a usar el elemento, pero no estoy seguro de cómo. Mostraré el archivo app.jsx con las declaraciones de elementos que no parecían funcionar todavía y el archivo sin usar ningún elemento, lo que tampoco ayudó, pero es a lo que estoy acostumbrado. ¿Alguien me puede apuntar en la dirección correcta?
índice.js:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './pages/App/App'; import { BrowserRouter, Routes, Route } from 'react-router-dom' ReactDOM.render( <BrowserRouter> <Routes> <React.Fragment> <Route render={() => <App/>} /> </React.Fragment> </Routes> </BrowserRouter>, document.getElementById('root') );App.jsx: con elemento
import React, { useState } from 'react'; import { Route, NavLink } from 'react-router-dom' import './App.css'; function App() { const [puppies, setPuppies] = useState([]) return ( <div className="App"> <header className="App-header"> React Puppies CRUD <nav> <NavLink exact to='/' element={<div>Index</div>}>Puppy List</NavLink> <NavLink className='m-left' exact to='/add' element={<div>Add</div>}>Add Puppy</NavLink> </nav> </header> <main> </main> </div> ); } export default App;App.jsx: sin elemento
import React, { useState } from 'react'; import { Route, NavLink } from 'react-router-dom' import './App.css'; function App() { const [puppies, setPuppies] = useState([]) return ( <div className="App"> <header className="App-header"> React Puppies CRUD <nav> <NavLink exact to='/'>Puppy List</NavLink> <NavLink className='m-left' exact to='/add'>Add Puppy</NavLink> </nav> </header> <main> </main> </div> ); } export default App;Los enlaces usan un to prop para la ruta de destino a la que se vinculan, y la interfaz de usuario debe representarse en los componentes de la Route en el element prop. Sugiero representar incondicionalmente el componente de la App y mover las rutas a él.
Ejemplo:
índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './pages/App/App'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.getElementById('root') );aplicación
import React, { useState } from 'react'; import { Routes, Route, NavLink } from 'react-router-dom' import './App.css'; function App() { const [puppies, setPuppies] = useState([]); return ( <div className="App"> <header className="App-header"> React Puppies CRUD <nav> <NavLink end to='/'>Puppy List</NavLink> <NavLink className='m-left' to='/add'>Add Puppy</NavLink> </nav> </header> <main> <Routes> <Route path="/" element={<div>Puppy List</div>} /> <Route path="/add" element={<div>Add Puppy</div>} /> </Routes> </main> </div> ); } export default App;